<template>
	<view>
		<view class="mt-5" v-if="u_loadmore">
			<u-loadmore status="loading" icon-type="circle" />
		</view>
		<view v-else>
			<view class="deep">
				<view class="my-2" v-if="assList.length==0">
					<view  class="d-flex flex-column j-center a-center h-100 pb-3">
						<image src="../../static/images/home/icon_no_data.png" mode="" class="icon_no_data"></image>
						<view class="">暂无商品</view>
					</view> 
				</view>
				<view class="bg-white pl-3" v-else>
					<u-checkbox-group wrap>
						<u-checkbox size="45" 
						v-for="(item,index) in assList" 
						:key='index' active-color="#ee514c"
						v-model="item.option_show" 
						shape="circle" :name="item.name"
						@change="checkboxChange" 
						>{{item.name}}</u-checkbox>
					</u-checkbox-group>
				</view>	
			</view>
			
			<view class="footer"></view>
			<view class="bg-white py-2 w-100 d-flex j-sb position-fixed bottom-0 btn">
				<view class="d-flex a-center ml-3">
					<u-checkbox-group>
								<u-checkbox  active-color="#ee514c" size="45" v-model="checked" shape="circle" @change="checkboxAll" >全选</u-checkbox>
					</u-checkbox-group>
				</view>
				<button type="warn" @click="preserve">确定(已选{{conut}})</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				assList:"" ,// 关联商品
				conut:0, // 数量
				seach_keywords:"", // 关键字
				cat_id:"", // 分类ID
				checked:false,
				goods_id:'', // 商品ID
				goods_name:"", // 商品标识
				edit_name:"", // 选择
				next_name:"",
				u_loadmore:true, // 加载中
			}
		},
		methods: {
			// 复选框
			checkboxChange(e){
				if(e.value){
					this.conut+=e.value
				}else{
					this.conut=this.conut-1
				}
				
			},
			// 全选
			checkboxAll(e){
				
				if(e.value){
					this.assList.map((val,index) => {
						val.option_show = true;
					})
					this.conut+=this.assList.length
				}else{
					this.assList.map((val,index) => {
						val.option_show = false;
					})
					this.conut=0
					console.log(1)
				}
			},
			// 确定
			preserve(){
				if(this.edit_name=='选择'){
					uni.navigateTo({
						url:`/pages/goods-ass-goods/goods-ass-goods?goods_id=${this.goods_id}&option=${'选择'}&goods_name=添加&ass_name=选择&edit_name=${this.edit_name}&next_name=${this.next_name}`
					})
				}else{
					uni.navigateTo({
						url:`/pages/goods-ass-goods/goods-ass-goods?goods_id=${this.goods_id}&option=${'选择'}&goods_name=${this.goods_name}&next_name=${this.next_name}`
					})
				}
				
				
				let arr=[]
				arr=this.assList.filter((item,index)=>{
					if(item.option_show==true){
						return item
					}
				})
				uni.setStorageSync("ass",JSON.stringify(arr))
			}
		},
		onLoad(e) {
			console.log(e)
			if(e.goods_id){
				this.goods_id=e.goods_id
			}
			this.next_name=e.next_name
			this.edit_name=e.edit_name
			this.goods_name=e.goods_name
			this.seach_keywords=e.seach_keywords
			this.cat_id=e.cat_id
			if(e.seach_keywords){
				this.$H.post("admin/merchant/goods/list",{
					keywords:e.seach_keywords
				}).then(res=>{
					this.assList=res.data
					this.assList.filter(v=>{
						return v.option_show=false
					})
					this.u_loadmore=false 
					this.assList.splice(this.assList.findIndex(item=>item.goods_id==this.goods_id),1)
				})
			}else if(e.cat_id){
				this.$H.post("admin/merchant/goods/list",{
					category_id:e.cat_id
				}).then(res=>{
					this.assList=res.data
					this.assList.filter(v=>{
						return v.option_show=false
					})
					this.u_loadmore=false 
					this.assList.splice(this.assList.findIndex(item=>item.goods_id==this.goods_id),1)
				})
			}
		}
	}
</script>

<style>
	
	.btn /deep/ button{
		width: 60%;
		border-radius: 50upx;
		margin-left: 50upx;
		background: linear-gradient(to right,#F31E3E,#FB4F37);
	}
	.icon_no_data{
		width: 250upx;
		height: 250upx;
	}
	.restore{
		border-radius: 40upx;
		border: 1px solid #555;
	}
	.deep /deep/ .u-checkbox{
		padding: 30upx 0;
		border-bottom: 1px solid #EAEAEA;
	}
	.deep .u-checkbox::last-child{
		border-bottom: none;
	}
</style>